<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="种子文件">
        <input type="file" name="torrent" @change="torrentChange"> </input>
        <p>{{ form.torrent }}</p>
      </el-form-item>
      <el-form-item label="种子名称" class="input-cls">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="标题" class="input-cls">
        <el-input v-model="form.title"/>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="form.type" placeholder="类型">
          <el-option
            v-for="item in torrentType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="标签">
        <el-select v-model="form.labels" multiple filterable placeholder="请选择标签" class="input-cls">
          <el-option
            v-for="item in torrentLabels"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="匿名发布">
        <el-switch v-model="form.status"/>
      </el-form-item>

      <el-form-item label="封面">

        <div class="imgInput" @click="clickUpload">
          <i slot="default" class="el-icon-plus" :class="torrentCover.iClass"></i>
          <input type="file" ref="img_input" accept="image/*" style="display: none" @change="coverChange"></input>
          <img :src="torrentCover.imgSrc" :class="torrentCover.imgClass"/>
        </div>
      </el-form-item>

      <el-form-item label="简介">
        <mavon-editor v-model="form.description"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {getAttribute, uploadTorrent} from '@/api/form'


const bencode = require('bencode')
const reader = new FileReader();
const textDecoder = new TextDecoder()

export default {
  data() {
    return {
      form: {
        torrent: null,
        title: null,
        name: '',
        type: null,
        labels: [],
        status: true,
        coverPath: '',
        description: ''
      },
      torrentType: [],
      torrentLabels: [],
      torrentCover: {
        iClass: '',
        deleteShow: false,
        imgClass: '',
        imgSrc: null,
      }
    }
  },
  mounted() {
    //类型设置
    getAttribute({"type": "properties", "name": "torrentType"})
      .then(response => response.body.torrentType)
      .then(res => JSON.parse(res.value))
      .then(res => {
        this.torrentType = res.options
      })
    //标签设置
    getAttribute({"type": "properties", "name": "torrentLabels"})
      .then(response => response.body.torrentLabels)
      .then(res => JSON.parse(res.value))
      .then(res => {
        this.torrentLabels = res.options
      })

  },

  methods: {
    clickUpload() {
      this.$refs.img_input.click()
    },
    coverChange(event) {
      const file = event.target.files[0]
      reader.readAsDataURL(file)
      reader.onload = e => {
        this.torrentCover.imgSrc = e.target.result
        this.torrentCover.iClass = 'displayNone'
        this.torrentCover.imgClass = 'displayInlineBlock'
        this.torrentCover.deleteShow = true
        this.form.coverPath = file
      }
    },

    /**
     * 获取种子文件， 并解析获取名称
     * @param event
     */
    torrentChange: function (event) {
      if (window.FileReader) {
        const file = event.target.files[0];
        //读取文件
        reader.readAsArrayBuffer(file)
        //读取完成后解析获取信息
        reader.onload = eva => {
          try {
            let t = bencode.decode(eva.target.result)
            this.form.name = textDecoder.decode(t.info.name)
            this.form.torrent = file
          } catch (err) {
            this.$message.error("请输入正确的种子文件")
          }

        }
      } else {
        alert('error');
      }
    }
    ,
    onSubmit() {
      const formDate = new FormData()
      formDate.append("torrent", this.form.torrent)
      formDate.append("title", this.form.title)
      formDate.append("name", this.form.name)
      formDate.append("type", this.form.type)
      formDate.append("labels", JSON.stringify(this.form.labels))
      formDate.append("status", this.form.status ? "2" : "1")
      formDate.append("coverPath", this.form.coverPath)
      formDate.append("description", this.form.description)

      uploadTorrent(formDate).then(res => {
        if (res.code === 20000) {
          this.$message.success("发布成功")
          this.$router.push({path: '/torrent/table' || '/'})
        }
      })
    }
    ,
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
    ,
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 80%;

  .input-cls {
    width: 90%;
  }

  .imgInput {
    background-color: #fbfdff;
    display: inline-block;
    height: 148px;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    line-height: 146px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;

    .el-icon-plus {
      font-size: 28px;
      color: #8c939d;
      margin: 0 60px;
    }

    .displayNone {
      display: none;
    }

    .displayInlineBlock {
      display: block;

      height: 148px;
    }
  }
}

.line {
  text-align: center;
}
</style>

